<template>
  <div class="m-site-footer m-container">
    <div class="concat-us-item" @click="copyHandler('+86 191 8699 3576')">
      <img :src="locale == 'en-US' ? whatAppIcon : phoneIcon" />
      <span>+86 191 8699 3576</span>
      <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/copy-icon.png" />
    </div>
    <div class="concat-us-item" @click="copyHandler('sanyyunlian@gmail.com')">
      <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/email-icon-grey.png" />
      <span>sanyyunlian@gmail.com</span>
      <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/copy-icon.png" />
    </div>
    <div class="concat-us-info">
      <a href="https://beian.miit.gov.cn" style="text-decoration: none" target="_blank">{{ $t("recordNumber") }}</a>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  props: {},
  data() {
    return {
      phoneIcon: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/phone-icon-grey.png",
      whatAppIcon: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/whatApp-icon-grey.png"
    }
  },
  mounted() {},
  computed: { ...mapState(["locale"]) },
  components: {},
  methods: {
    copyHandler(data) {
      this.$copyText(data).then(
        (res) => {
          console.log(res.text) //这里可以换成提示信息，比如：已成功复制到剪切板
          this.$message.success("已成功复制到剪切板")
        },
        (err) => {
          console.log(err)
        }
      )
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.m-site-footer {
  margin-top: 220px;
  padding-bottom: 400px;
  .concat-us-info {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 61px;
    color: #999;
    line-height: 92px;
    text-align: center;
    margin-top: 80px;
  }
  .concat-us-item {
    height: 205px;
    background: #f6f7f9;
    border: 3px solid #d8d8d8;
    padding: 0 50px;
    box-sizing: border-box;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 82px;
      height: 82px;
    }
    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 82px;
      color: #999;
    }
  }
}
</style>
